<template>
  <view class="container">
    <view class="background">
      <!-- 模糊的图片背景 -->
    </view>
    <view class="logo-name">
      <image class="logo" src="../../static/logoimg.png" />
      <text class="store-name">拾一块旗舰店</text>
    </view>
    <view class="info-header">
      <text class="info-title">商户信息</text>
    </view>
    <view class="info-content">
      <view class="left-content" style="display: flex;">
		  <view class="info-text" style="font-size: 20px;">拾一块旗舰店</view>
		  <view class="info-text1">生活服务</view>
      </view>
     <!-- <view class="right-content">
				<view class="left" @click="gotoMap">
					<image class="icon" src="/static/导航.png" />
					<text class="icon-text">地图导航</text>
				</view>	
				<view class="right">
					<image class="icon" src="/static/分享.png" />
					<text class="icon-text">分享好友</text>
				</view>
      </view> -->
    </view>
    <view class="info-details">
      <view class="left-details">
        <text class="details-text">商铺地址</text>
        <text class="details-text">云南省昆明市呈贡区书香大地7栋727号</text>
      </view>
      <view class="right-details">
        <text class="details-text">联系电话</text>
        <text class="details-text">0871-5571-7788</text>
      </view>
    </view>
		<view class="header">
		      <text class="title">全部商品</text>
		      <!-- <image class="search-icon" src="/static/搜索.png" /> -->
		    </view>
				
		    <view class="options">
		      <view class="option" :class="{ active: sortKey === 'id' }" @click="changeOption('id')">
		        <text>全部</text>
		        <image class="arrow-down" src="/static/箭头 下.png" :class="{ flipped: sortKey === 'id' && orderDescending }" />
		      </view>
		      <view class="option" :class="{ active: sortKey === 'sales' }" @click="changeOption('sales')">
		        <text>销量</text>
		        <image class="arrow-down" src="/static/箭头 下.png" :class="{ flipped: sortKey === 'sales' && orderDescending }" />
		      </view>
		      <view class="option" :class="{ active: sortKey === 'time' }" @click="changeOption('time')">
		        <text>上架时间</text>
		        <image class="arrow-down" src="/static/箭头 下.png" :class="{ flipped: sortKey === 'time' && orderDescending }" />
		      </view>
		      <view class="option" :class="{ active: sortKey === 'price' }" @click="changeOption('price')">
		        <text>价格</text>
		        <image class="arrow-down" src="/static/箭头 下.png" :class="{ flipped: sortKey === 'price' && orderDescending }" />
		      </view>
		    </view>
				
				
		    <view class="product-list">
		      <!-- 循环渲染商品列表 -->
		      <view v-for="product in commodityList" :key="product.id" class="product-item">
		        <image class="product-img" :src="getImage(product.images)" />
		        <text class="product-name">{{ product.name }}</text>
		        <view class="product-details">
		          <text class="product-price">¥{{ product.value }}</text>
		          <text class="product-sales">销量: 100</text>
		        </view>
		      </view>
		    </view>
  </view>
</template>

<script>
	import {getCommodityListByCategoryId} from '../../common/api/product.js';
export default {
	data() {
	  return {
			
			activeOption: '全部', // 当前选中的选项
			orderDescending: true, // 排序方式，true为降序，false为升序
			sortKey:'',
			ascending: true,
			commodityList: [],
			
		} 
		
		
	},
	computed: {
	  sortedItems() {
	    const sorted = [...this.productList];
			sorted.sort((a, b) => {
			  if (this.sortKey === 'price' || this.sortKey === 'sales') {
			     return this.ascending ? a[this.sortKey] - b[this.sortKey] : b[this.sortKey] - a[this.sortKey];
			  } else if (this.sortKey === 'time') {
			      return this.ascending ? new Date(a[this.sortKey]) - new Date(b[this.sortKey]) : new Date(b[this.sortKey]) - new Date(a[this.sortKey]);
			  } else {
			      return this.ascending ? a[this.sortKey] - b[this.sortKey] : b[this.sortKey] - a[this.sortKey];
			  }
			});
	
	      return sorted;
	    }
	  },
	  mounted(){
		this.fetchCategoryList()
	  },
	methods: {
		getImage(image) {
			return `http://43.136.172.73/api/v1/file/download?fileName=${image}`
		},
		fetchCategoryList(){
			uni.request({
				url:'http://43.136.172.73/api/v1/commodity/list',
				method:'GET',
				header: {
					'Authorization': 'sfsdf',
				},
				success: (res) => {
				    this.commodityList = res.data.data; // 将获取到的商品列表更新到组件数据属性中
				    console.log(this.commodityList);
				},
				fail: (err) => {
				    console.error(err);
				}
			});
		},
	  changeOption(option) {
	    // if (this.activeOption === option) {
	      // this.orderDescending = !this.orderDescending;
	    // } else {
	    //   this.activeOption = option;
	    //   this.orderDescending = true;
	    // }
			
	    if (this.sortKey === option) {
	      this.ascending = !this.ascending;
				this.orderDescending = !this.orderDescending;
	    } else {
	      this.sortKey = option;
	      this.ascending = true;
				this.activeOption = option;
				this.orderDescending = true;
	    }
	  },
		gotoMap() {
		  uni.navigateTo({
				url: '/pages/storeHomepage/map/map' // 要跳转的地图页面的路径，与pages.json配置中的路径保持一致
		  })
		},
	}
}
	
</script>





<style lang="scss" scoped>
.container {
  width: 100%;
  /* height: 100vh; */
	background-color: #f3f3f3;
}

.background {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 350rpx;
  /* 设置模糊的图片背景样式 */
	background-image: url('/static/011.png');
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
	filter: blur(10px);
	/* 设置背景图片 */
	// z-index: -1;
	border: 1px solid #000000;
}

.logo-name {
	// background-color: #fff;
	display: flex;
	align-items: center;
	margin: 30rpx;
	width: 100%;
	height: 350rpx;
	
	.logo {
		width: 150rpx;
		height: 150rpx;
		z-index: 2;
	}

	.store-name {
		margin-left: 10px;
		z-index: 2;
		font-size: 45rpx;
		font-weight: bold;
		box-shadow: 0 0 5px rgba(0, 0, 0, 0.2), 0 0 20px rgba(0, 0, 0, 0.1);

		color: white;
	}
}



.info-header {
	margin-top: 20rpx;
	text-align: center;
	background-color: #fff;
	padding: 20px;
	// border: 1px solid #000;
	margin-top: 40rpx;
	
	.info-title {
		font-size: 18px;
		font-weight: bold;
	}
}



.info-content {
  display: flex;
  justify-content: space-between;
  background-color: #fff;
  align-items: center;
	margin-top: 20rpx;
	border-bottom: 1rpx solid #fff;
	
	.left-content {
		// flex: 1;
		flex-direction: column;
		font-size: 5px;
		margin-left: 50rpx;
		
		.info-text{
			font-weight: bold;
		}
	}

	.right-content {
		// flex: 1;
		align-items: center;
		
		.left{
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			margin-right: 20rpx;
		}
		.right{
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
		}
	}

	.icon {
		width: 30px;
		height: 30px;
	}

	.icon-text {
		margin-top: 5px;
	}
}



.info-details {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px;
	border-bottom: 5rpx solid #fff;
	.left-details {
		display: flex;
		flex-direction: column;
		
		.details-text{
			font-size: 5px;
			margin: 5rpx;
		}
}

	.right-details {
		display: flex;
		flex-direction: column;
		
		.details-text{
			font-size: 5px;
			margin: 5rpx;
		}
	}
}

.header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 40rpx;

  .title {
    font-size: 40rpx;
    font-weight: bold;
		
  }

  .search-icon {
    width: 40rpx;
    height: 40rpx;
  }
}


.options {
  display: flex;
  justify-content: space-between;
  padding: 40rpx;
  background-color: #f0f0f0;
	border-top: 5rpx solid #fff;
	font-size: 32rpx;
  .option {
    display: flex;
    align-items: center;

    &.active {
      font-weight: bold;
    }

    .arrow-down {
      width: 10px;
      height: 10px;
      margin-left: 5px;

      &.flipped {
        transform: rotate(180deg);
      }
    }
  }
}


.product-list {
  padding: 20rpx;
	display:flex;
	flex-wrap: wrap;
	
  .product-item {
    display: flex;
    flex-direction: column;
    width: 40%;
    margin-bottom: 20px;
		margin: 34rpx;
		
    .product-img {
      width: 100%;
      height: 150px;
    }

    .product-name {
      margin-top: 10px;
      font-weight: bold;
    }

    .product-details {
      display: flex;
      justify-content: space-between;
      align-items: center;
	  font-size: 5px;
      margin-top: 5px;

      .product-price {
        // 根据需求设计价格样式
      }

      .product-sales {
        // 根据需求设计销量样式
      }
    }
  }
}


</style>